<!--
  @Description: 医嘱计费设置
-->
<template>
   <navbar />
  <div class="main-container medical-order-billing-settings">
    <el-card class="tab-card">
      <el-tabs v-model="activeTab" class="single-tab">
        <el-tab-pane label="自动规则设置" name="autoRule">
          <div class="settings-container">
            <!-- 顶部规则：每日计费时间 + 自动入收费单 -->
            <div class="top-rule">
              <!-- 小标题：自动计费时间（与时间选择同一行） -->
              <span class="section-title">自动计费时间</span>
              <!-- 文案：住院期间当天费用将于每天 -->
              <span class="label-text">住院期间当天费用将于每天</span>
              <!-- 时间选择：09:00 -->
              <el-time-select
                style="width: 120px"
                v-model="form.dailyChargeTime"
                :start="'00:00'"
                :step="'00:30'"
                :end="'23:30'"
                placeholder="选择时间"
              />
              <!-- 自动计入收费单开关 -->
              <span class="label-text ml-12">自动计入收费单</span>
              <span class="tip-text ml-12">计费时间修改后次日生效</span>
            </div>

            <!-- 说明提示：与原型一致使用信息提示 -->
            <div class="tip-line">
              <!-- 小标题：自动计费项目（与提示同一行） -->
              <span class="section-title">自动计费项目</span>
              <el-alert
                class="rule-tip"
                type="warning"
                :closable="false"
                show-icon
                description="添加到床位或“不需要住院执行”的医嘱后的医嘱，将成为自动计费项目每日滚动计费。可以通过停用项目或取消病床、医嘱的关联来停止自动计费"
              />
            </div>
            <div class="table-container">
              <!-- 表格：项目设置（严格按列顺序） -->
              <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
                <!-- 项目名称 -->
                <el-table-column prop="itemName" label="项目名称" min-width="140" />
                <!-- 医嘱类型 -->
                <el-table-column prop="orderType" label="医嘱类型" width="120" />
                <!-- 来源 -->
                <el-table-column prop="source" label="来源" width="120" />
                <!-- 单位 -->
                <el-table-column prop="unit" label="单位" width="90" />
                <!-- 售价（可编辑） -->
                <el-table-column label="售价" width="120">
                  <template #default="{ row }">
                    <!-- 输入价格时使用数字校验，避免无效字符 -->
                    <el-input v-model.number="row.price" placeholder="0.00" size="small" @input="onPriceInput(row)" />
                  </template>
                </el-table-column>
                <!-- 生效时间：三段下拉（年/月/日），默认当年/1月/1号 -->
                <el-table-column label="生效时间" min-width="260">
                  <template #default="{ row }">
                    <div class="effect-time">
                      <div>
                        <!-- 年：当年或指定年份（示例提供“当年”和“-”） -->
                        <el-select v-model="row.effect.year" placeholder="当年" size="small" class="w-90">
                          <el-option label="当年" value="current" />
                          <el-option label="次年" value="next" />
                        </el-select>

                        <!-- 月：1~12月 -->
                        <el-select v-model="row.effect.month" placeholder="1月" size="small" class="w-80 ml-8">
                          <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
                        </el-select>

                        <!-- 日：1~31号 -->
                        <el-select v-model="row.effect.day" placeholder="1号" size="small" class="w-80 ml-8">
                          <el-option v-for="d in 31" :key="d" :label="d + '号'" :value="d" />
                        </el-select>
                      </div>
                      <div style="margin: 0 8px">~</div>
                      <div>
                        <!-- 年：当年或指定年份（示例提供“当年”和“-”） -->
                        <el-select v-model="row.effect.year" placeholder="当年" size="small" class="w-90">
                          <el-option label="当年" value="current" />
                          <el-option label="次年" value="next" />
                        </el-select>

                        <!-- 月：1~12月 -->
                        <el-select v-model="row.effect.month" placeholder="1月" size="small" class="w-80 ml-8">
                          <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
                        </el-select>

                        <!-- 日：1~31号 -->
                        <el-select v-model="row.effect.day" placeholder="1号" size="small" class="w-80 ml-8">
                          <el-option v-for="d in 31" :key="d" :label="d + '号'" :value="d" />
                        </el-select>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <!-- 状态：启用/停用 -->
                <el-table-column label="状态" width="120" align="center">
                  <template #default="{ row }">
                    <el-select v-model="row.status" size="small" class="w-90">
                      <el-option label="启用" value="enabled" />
                      <el-option label="停用" value="disabled" />
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页：与原型一致的底部分页（示意） -->
            <div class="queryParams-container">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="pageNum"
                @current-change="handlePageChange"
              />
            </div>

            <!-- 操作按钮：保存/取消（居左） -->
            <div class="action-row">
              <el-button type="primary" :loading="saveLoading" @click="handleSave">保存</el-button>
              <el-button class="ml-8" @click="handleCancel">取消</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup name="MedicalOrderBillingSettings">
// 组合式API
import { ref, reactive, onMounted } from 'vue'

// Tab 激活项（单Tab但保持一致接口）
const activeTab = ref('autoRule')

// 顶部表单
const form = reactive({
  // 每日计费时间：默认 09:00
  dailyChargeTime: '09:00'
})

// 表格数据加载
const tableLoading = ref(false)
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 价格输入时校验（避免负数与过长）
function onPriceInput(row) {
  // 关键节点：数值校验，非数字清空，负数置0，保留两位
  const v = Number(row.price)
  if (Number.isNaN(v)) {
    row.price = 0
  } else if (v < 0) {
    row.price = 0
  } else {
    // 避免重复计算：仅格式化展示不改变存储类型
    row.price = Math.round(v * 100) / 100
  }
}

// 模拟加载数据（避免多层嵌套，提前返回）
function loadData() {
  tableLoading.value = true
  try {
    // 优先从本地存储读取
    const cache = localStorage.getItem('charge-settings-items')
    if (cache) {
      const parsed = JSON.parse(cache)
      tableData.value = parsed.items || []
      total.value = parsed.total || parsed.items?.length || 0
      return
    }
    // 默认数据（与原型示例一致）
    const defaults = [
      {
        itemName: '床位费',
        orderType: '-',
        source: '病区床位',
        unit: '天',
        price: 10,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '取暖费',
        orderType: '-',
        source: '病区床位',
        unit: '天',
        price: 5,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '降温费',
        orderType: '-',
        source: '病区床位',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '特级护理',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '一级护理',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '二级护理',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '三级护理',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '普食',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '膳食',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      },
      {
        itemName: '高蛋白饮食',
        orderType: '护理',
        source: '医嘱',
        unit: '天',
        price: 0,
        effect: { year: 'current', month: 1, day: 1 },
        status: 'enabled'
      }
    ]
    tableData.value = defaults
    total.value = defaults.length
  } finally {
    tableLoading.value = false
  }
}

// 分页切换（示意：当前页更新即可）
function handlePageChange(p) {
  pageNum.value = p
}

// 保存设置：写入本地存储，并提示
const saveLoading = ref(false)
async function handleSave() {
  try {
    saveLoading.value = true
    localStorage.setItem('charge-settings-items', JSON.stringify({ items: tableData.value, total: total.value, form }))
    // 使用全局消息（与项目风格一致）
    window?.$modal?.msgSuccess?.('保存成功')
  } catch (e) {
    console.warn('保存失败:', e)
    window?.$modal?.msgError?.('保存失败')
  } finally {
    saveLoading.value = false
  }
}

// 取消：恢复缓存或默认
function handleCancel() {
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.medical-order-billing-settings {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .single-tab {
    --el-tabs-header-height: 40px;
  }

  .settings-container {
    padding: 8px 4px 16px;

    .top-rule {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    // 小标题样式：加粗、与后续内容同一行
    .section-title {
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin-right: 12px;
      white-space: nowrap;
    }

    .label-text {
      color: var(--el-text-color-primary);
    }

    .tip-text {
      color: var(--el-text-color-secondary);
      font-size: 12px;
    }

    .ml-8 {
      margin-left: 8px;
    }
    .ml-12 {
      margin-left: 12px;
    }

    // 标题与提示在一行展示
    .tip-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 8px 0 12px;
    }
    .rule-tip {
      flex: 1;
      margin: 0; // 在 tip-line 中去掉自身外边距，统一由容器控制
    }

    .effect-time {
      display: flex;
      align-items: center;
    }
    .w-90 {
      width: 90px;
    }
    .w-80 {
      width: 80px;
    }

    .action-row {
      margin-top: 12px;
      text-align: left;
    }
  }
}
</style>
